<template>
  <div class="login-wrapper">
    <Form ref="form" :model="form" :rules="ruleValidate" class="login-form">
      <FormItem prop="logo">
        <div class="logo"></div>
      </FormItem>
      <FormItem prop="username">
        <Input v-model="form.username" placeholder="请输入用户名" class="textbox" />
      </FormItem>
      <FormItem prop="password">
        <Input
          v-model="form.password"
          type="password"
          password
          placeholder="请输入密码"
          class="textbox"
        />
      </FormItem>
      <FormItem prop="captcha">
        <Input v-model="form.captcha" placeholder="请输入验证码" class="textbox" />
      </FormItem>
      <FormItem>
        <Button type="primary" class="btn" @click="loginSubmit()">立即登录</Button>
      </FormItem>
    </Form>
    <div class="login-footer">
      <span class="left">黔公网安备 32059002001776号 增值电信业务经营许可证：黔B2-20140496 黔ICP备14006450号-3</span>
      <span class="right">版权归贵阳市发展和改革委员会所有 Copyrights All Reserved 2019-2020</span>
    </div>
    <Spin v-show="loading" fix size="large" />
  </div>
</template>

<style scoped>
.login-wrapper {
  background: url("../assets/login-bg.png") no-repeat center center;
  width: 100%;
  height: calc(100vh);
}

.login-footer {
  position: fixed;
  bottom: 0;
  width: 1336px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
}

.login-footer span {
  font-size: 12px;
  color: #fff;
  text-shadow: 0 3px 8px #00000045;
}

.logo {
  width: 556px;
  height: 115px;
  margin: 0px auto 90px auto;
  background: url("../assets/login-logo.png") no-repeat center center;
}

input {
  background: transparent;
}

.login-form {
  width: 556px;
  height: auto;
  margin: 0 auto;
  position: relative;
  top: 150px;
}

.btn {
  border: 2px #fff solid;
  border-radius: 5px;
  background: #fff;
  color: #0d0844;
  font-size: 18px;
  margin-top: 30px;
  width: 100%;
  padding: 8px 0;
  height: auto;
}
</style>

<script>
import axios from "axios";
import { __URLHEAD } from "../config/global";
import Base64 from "../plugins/base64";

export default {
  name: "",
  data() {
    return {
      form: {
        username: null,
        password: null,
        captcha: null
      },
      ruleValidate: {
        username: [
          {
            required: true,
            message: "用户名是必须输入的",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码是必须输入的",
            trigger: "blur"
          }
        ],
        captcha: [
          {
            required: false,
            message: "验证码是必须输入的",
            trigger: "blur"
          }
        ]
      },
      loading: false
    };
  },
  methods: {
    loginSubmit() {
      const base = new Base64();
      const encrypass = base.encode(this.form.password);
      this.loading = true;
      axios
        .get(__URLHEAD + "actionLogin", {
          params: {
            username: this.form.username,
            password: encrypass
          }
        })
        .then(res => {
          const json = res.data;
          const { token = null, message = "" } = json.Data;
          const { username } = this.form;
          if (json.IsSuccess) {
            this.$store.dispatch("login", { username, token });
            this.$Message.success({
              content: `登录成功，欢迎回来，${username}`,
              duration: 5
            });
            this.loading = false;
            this.$router.push("home");
          } else {
            console.error(message);
            this.$Message.error({
              content: `登录接口 actionLogin 产生${message}异常，请联系维护单位`,
              duration: 5
            });
            this.loading = false;
          }
        });
    }
  }
};
</script>
